import './CostHome.scss'

import { Select } from 'antd'
import { useRef, useState, useEffect } from 'react'
import { useMount, useRequest, useSize } from 'ahooks'

import { Http } from '../../../Api'
import { ICON } from '../../../Configure/Icon'
import {
    ColumnStyle,
    ColumnConfigA01Template,
    LineStyle,
    LineConfigA01Template,
} from '../../../../Pages/Front/Assets/Template/AssetsCharts'

const ListA01 = [
    { uuid: 2, label: '收入', value: '收入', unit: '万元', icon: 'IconHoutaiShouyetouzikongjian' },
    { uuid: 3, label: '成本', value: '成本', unit: '万元', icon: 'IconAHoutaiShouyetouzikongjianbeifen10' },
    { uuid: 4, label: '利润', value: '利润', unit: '万元', icon: 'IconAHoutaiShouyetouzikongjianbeifen10' },
    { uuid: 6, label: '利润率', value: '利润率', unit: '%', icon: 'IconChart78' },
]

const NavBtm = [
    { uuid: 1, label: '历史同期收入对比' },
    { uuid: 2, label: '历史同期利润对比' },
    { uuid: 3, label: '按月收入对比' },
]

const chartStyld = {
    Legendfill: '#262626',
    XLine: '#262626',
    XLabel: '#262626',
    XTick: '#262626',
    YColoc: '#262626',
    YGrid: 'rgba(0,0,0,0.35)',
}

const options = Array.from({ length: 9 }, (_, index) => ({ label: `最近${index + 2}年`, value: index + 2 }))

export const CostHome = () => {
    const columnBox = useRef()
    const columnSize = useSize(columnBox)

    const lineBox = useRef()
    const lineSize = useSize(lineBox)

    const [DataA01, setDataA01] = useState({ 成本: 0, 利润率: 0, 收入: 0, 利润: 0 })
    const [DataA02, setDataA02] = useState([])

    const [DataA03, setDataA03] = useState([])
    const [DataA04, setDataA04] = useState([])
    const [DataA05, setDataA05] = useState([])

    const { runAsync: getCost } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            if (res) setDataA01(res)
        },
    })
    const { runAsync: getColumn } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.flatMap(({ uuid, 名称, 利润, 成本, 收入 }) => [
                { uuid, name: '收入', type: 名称, value: 收入 },
                { uuid, name: '成本', type: 名称, value: 成本 },
                { uuid, name: '利润', type: 名称, value: 利润 },
            ])
            setDataA02(data)
        },
    })

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [A01, A02] = res.list.reduce(
                ([accA01, accA02], { uuid, 年份, 月份, 利润, 收入 }) => [
                    [...accA01, { uuid, name: 年份, type: 月份, value: 收入 }],
                    [...accA02, { uuid, name: 年份, type: 月份, value: 利润 }],
                ],
                [[], []],
            )
            setDataA03(A01)
            setDataA04(A02)
        },
    })

    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.flatMap(({ uuid, 年月, 类型, 金额 }) => [
                { uuid, name: 类型, type: 年月, value: 金额 },
            ])
            setDataA05(data)
        },
    })

    useMount(() => {
        getCost({ url: 'getCost' })
        getColumn({ url: 'getCompanyCostList' })
    })

    const [Active, setActive] = useState(1)
    const [Year, setYear] = useState(3)
    useEffect(() => {
        getOne({ url: 'getEveryMonthCumulativeCostByYear', data: { Year } })
        getTwo({ url: 'getEveryMonthCostByYear', data: { Year } })
    }, [Year])

    const onActive = uuid => {
        setActive(uuid)
    }

    return (
        <div className="CostHome">
            <div className="top">
                <div className="left">
                    <div className="Title">成本年经营运行情况</div>
                    <div className="List">
                        {ListA01.map(({ uuid, label, unit, icon }) => (
                            <div key={uuid}>
                                {ICON[icon]}
                                <div>
                                    <div>{label}</div>
                                    <div>
                                        {DataA01[label] || 0} <span>{unit}</span>{' '}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className="right">
                    <div className="Title">按公司成本统计</div>
                    <div className="List" ref={columnBox}>
                        {columnSize && (
                            <ColumnConfigA01Template
                                size={columnSize}
                                data={DataA02}
                                style={{ ...ColumnStyle, ...chartStyld }}
                            />
                        )}
                    </div>
                </div>
            </div>
            <div className="btm">
                <div className="Title">本年每个月各个公司情况</div>

                <div className="Nav">
                    <div className="NavList">
                        {NavBtm.map(({ uuid, label }) => (
                            <div className={`NavItem`} key={uuid} onClick={() => onActive(uuid)}>
                                {label}
                            </div>
                        ))}
                        <div className="line" style={{ left: (Active - 1) * 160 + 40 }} />
                    </div>
                    <div className="Date">
                        <Select
                            showSearch
                            style={{ width: 160 }}
                            defaultValue={Year}
                            options={options}
                            onChange={e => setYear(e)}
                        />
                    </div>
                </div>

                <div className="List" ref={lineBox}>
                    {console.log(lineSize)}
                    {lineSize &&
                        (Active === 1 ? (
                            <LineConfigA01Template
                                size={lineSize}
                                data={DataA03}
                                style={{ ...LineStyle, ...chartStyld }}
                            />
                        ) : Active === 2 ? (
                            <LineConfigA01Template
                                size={lineSize}
                                data={DataA04}
                                style={{ ...LineStyle, ...chartStyld }}
                            />
                        ) : (
                            <LineConfigA01Template
                                size={lineSize}
                                data={DataA05}
                                style={{ ...LineStyle, ...chartStyld }}
                            />
                        ))}
                </div>
            </div>
        </div>
    )
}
